<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>

    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <van-index-bar :index-list="leftList">
      <div v-for="(item, index) in search()" :key="index">
        <van-index-anchor :index="item.name" />
        <van-cell
          v-for="value in item.data"
          :key="value.id"
          @click="detail(value.id)"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <router-link
              :to="'/singer/songs?id=' + value.id"
              tag="div"
              class="van-cell-title"
            >
              <img width="45" height="45" :src="value.img1v1Url" />
              <span class="custom-title">{{ value.name }}</span>
            </router-link>
          </template>
        </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getToplistArtist, getArtistDetail } from "../api/singer";
import headerNav from "../components/base/headerNav.vue";
export default {
  data: function () {
    return {
      leftList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        // "K",
        // "L",
        // "N",
        // "M",
        // "O",
        // "P",
        // "Q",
        // "R",
        // "S",
        // "T",
        // "U",
        // "V",
        // "W",
        // "X",
        // "Y",
        // "Z",
      ],
      value: "",
      rightList: [],
    };
  },
  components: {
    headerNav,
  },
  methods: {
    ToplistArtistFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
    search() {
      return this.rightList.filter((item) => item.name.includes(this.value));
    },
    detail(id) {
      console.log(id)
      getArtistDetail({ id: id }).then((data) => {
        console.log(data);
      });
    },
  },
  created() {
    this.ToplistArtistFun(); //构建对象

    for (let i = 0; i < this.leftList.length; i++) {
      getToplistArtist({
        type: 2,
        area: 7,
        initial: this.leftList[i],
      }).then((data) => {
        let index = this.rightList.findIndex(
          (item) => item.name == this.leftList[i]
        );
        // this.rightList[index].data = data.artists;
        // console.log(data)
        this.$set(this.rightList[index], "data", data.artists);
      });
    }
  },
};
</script>

<style lang="less">
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  background-color: #d9dadb;
}

.van-search__content {
  border-radius: 20px;
}
</style>